<template>
	<view class="container">
		<swiper class="screen-swiper square-dot" :indicator-dots="true" :circular="true"
		 :autoplay="true" interval="5000" duration="500">
			<swiper-item v-for="(item,index) in swiperList" :key="index" @click="goWeb(item)">
				<image :src="item.thumb" mode="scaleToFill" ></image>
			</swiper-item>
		</swiper>
		
		<view class="cover-container">

			<view class="cu-card dynamic">
				<view class="cu-item shadow">
					<view class="grid flex-sub padding col-1">
						<view class="content flex-sub flex-wrap">
							<view class="flex flex-wrap">
								<view class="item basis-xs25 radius" @tap="goPage('/pages/tabbar/tabbar-2/socialSecurity')">
									<view class="image-light image-pg"><image src="/static/images/pg.png" class="png" mode="aspectFit"></image></view>
									<text class="text-grey">生产普工</text>
								</view>
								<view class="item basis-xs25 radius" @tap="goPage('/pages/tabbar/tabbar-2/socialSecurity')">
									<view class="image-light  image-js"><image src="/static/images/jsy.png" class="png" mode="aspectFit"></image></view>
									<text class="text-grey">驾驶员</text>
								</view>
								<view class="item basis-xs25 radius"  @tap="goPage('/pages/tabbar/tabbar-2/socialSecurity')" >
									<view class="image-light"><image src="/static/images/yyy.png" class="png" mode="aspectFit"></image></view>
									<text class="text-grey">营业员</text>
								</view>
								<view class="item basis-xs25 radius" @tap="goPage('/pages/tabbar/tabbar-2/socialSecurity')">
									<view class="image-light image-kf"><image src="/static/images/kf.png" class="png" mode="aspectFit"></image></view>
									<text class="text-grey">电话客服</text>
								</view>
								
								
								<view class="item basis-xs25 radius" @tap="goPage('/pages/tabbar/tabbar-2/socialSecurity')">
									<view class="image-light image-ba"><image src="/static/images/ba.png" class="png" mode="aspectFit"></image></view>
									<text class="text-grey">保安岗</text>
								</view>
								<view class="item basis-xs25 radius" @tap="goPage('/pages/tabbar/tabbar-2/socialSecurity')">
									<view class="image-light image-fw"><image src="/static/images/fwy.png" class="png" mode="aspectFit"></image></view>
									<text class="text-grey">服务员</text>
								</view>
								
								<view class="item basis-xs25 radius" @tap="goPageWith('/pages/tabbar/tabbar-2/socialSecurity')">
									<view class="image-light image-dg"><image src="/static/images/dgy.png" class="png" mode="aspectFit"></image></view>
									<text class="text-grey">导购员</text>
								</view>
								
								<view class="item basis-xs25 radius" @tap="goPageWith('/pages/tabbar/tabbar-2/socialSecurity')">
									<view class="image-light image-dx"><image src="/static/images/dx.png" class="png" mode="aspectFit"></image></view>
									<text class="text-grey">电销岗</text>
								</view>
								<view class="item basis-xs25 radius" @tap="goPage('/pages/tabbar/tabbar-2/socialSecurity')">
									<view class="image-light image-by"><image src="/static/images/byg.png" class="png" mode="aspectFit"></image></view>
									<text class="text-grey">搬运工</text>
								</view>
								<view class="item basis-xs25 radius" @tap="goPage('/pages/tabbar/tabbar-2/socialSecurity')" >
									<view class="image-light image-kd"><image src="/static/images/kdy.png" class="png" mode="aspectFit"></image></view>
									<text class="text-grey">快递员</text>
								</view>
								<view class="item basis-xs25 radius" @tap="goPage('/pages/tabbar/tabbar-2/socialSecurity')">
									<view class="image-light image-bj"><image src="/static/images/bjy.png" class="png" mode="aspectFit"></image></view>
									<text class="text-grey">保洁员</text>
								</view>
								
								<view class="item basis-xs25 radius"  @tap="goPage('/pages/tabbar/tabbar-2/socialSecurity')">
									<view class="image-light image-jz"><image src="/static/images/jzg.png" class="png" mode="aspectFit"></image></view>
									<text class="text-grey">建筑工</text>
								</view>
								<view class="item basis-xs25 radius"  @tap="goPage('/pages/tabbar/tabbar-2/socialSecurity')">
									<view class="image-light image-bx"><image src="/static/images/bx.png" class="png" mode="aspectFit"></image></view>
									<text class="text-grey">保险代理</text>
								</view>
								<view class="item basis-xs25 radius"  @tap="goPage('/pages/tabbar/tabbar-2/socialSecurity')">
									<view class="image-light image-hl"><image src="/static/images/hlg.png" class="png" mode="aspectFit"></image></view>
									<text class="text-grey">护理员</text>
								</view>
								<view class="item basis-xs25 radius"  @tap="goPage('/pages/tabbar/tabbar-2/socialSecurity')">
									<view class="image-light image-fj"><image src="/static/images/fjy.png" class="png" mode="aspectFit"></image></view>
									<text class="text-grey">分拣员</text>
								</view>
								<view class="item basis-xs25 radius"  @tap="goPage('/pages/tabbar/tabbar-2/socialSecurity')">
									<view class="image-light image-qt"><image src="/static/images/qt.png" class="png" mode="aspectFit"></image></view>
									<text class="text-grey">其他普工</text>
								</view>
							</view>


						</view>
					</view>
					<view class="grid flex-sub  col-1">
						<view class="content flex-sub flex-wrap">
							
							<view class="flex flex-wrap">
								<view class="item height-40 basis-xs25 radius pr5" @tap="goPage('/pages/tabbar/tabbar-2/socialSecurity')">
									<view class="image-jxg">
									<text class="text-white width100">见习岗</text></view>
								</view>
								<view class="item height-40 basis-xs25 radius pr5"  @tap="goPage('/pages/tabbar/tabbar-2/socialSecurity')">
									<view class="image-jxg image-lsg">
									<text class="text-white width100">临时工</text></view>
								</view>
								<view class="item height-40 basis-xs25 radius pr5" @tap="goPageWith('/pages/tabbar/tabbar-2/socialSecurity')">
									<view class="image-jxg image-sqg">
									<text class="text-white width100">暑期工</text></view>
								</view>
								<view class="item height-40 basis-xs25 radius" @tap="goPageWith('/pages/tabbar/tabbar-2/socialSecurity')">
									<view class="image-jxg image-jzg">
									<text class="text-white width100">兼职岗</text></view>
								</view>
							</view>


						</view>
					</view>
				</view>
			</view>
		</view>
	<!-- 绑定 -->
	<goReg 
		ref="goReg" 
		:contentHeight="580"
	></goReg>
	</view>
</template>
<script>
	import listCell from '@/components/mix-list-cell';
	import empty from "@/components/empty";
	import goReg from "@/components/goReg";
	// import {
	// 	mapState
	// } from 'vuex';
	let startY = 0,
		moveY = 0,
		pageAtTop = true;
	export default {
		components: {
			listCell,goReg
		},
		data() {
			return {
				coverTransform: 'translateY(0px)',
				coverTransition: '0s',
				moving: false,
				swiperList: [
				],
			}
		},
		onLoad() {},
		
		onShow() {
			console.log('tab1 show')
			this.getBanner();
		},
		// #ifndef MP
		onNavigationBarButtonTap(e) {
			const index = e.index;
			if (index === 0) {
				this.navTo('/pages/set/set');
			} else if (index === 1) {
				// #ifdef APP-PLUS
				const pages = getCurrentPages();
				const page = pages[pages.length - 1];
				const currentWebview = page.$getAppWebview();
				currentWebview.hideTitleNViewButtonRedDot({
					index
				});
				// #endif
				uni.navigateTo({
					url: '/pages/notice/notice'
				})
			}
		},
		// #endif
		
		computed: {
			// ...mapState(['hasLogin', 'userInfo'])
		},
		methods: {

			/**
			 * 统一跳转接口,拦截未登录路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			navTo(url) {
				if (!this.hasLogin) {
					url = '/pages/public/login';
				}
				uni.navigateTo({
					url
				})
			},

			/**
			 *  会员卡下拉和回弹
			 *  1.关闭bounce避免ios端下拉冲突
			 *  2.由于touchmove事件的缺陷（以前做小程序就遇到，比如20跳到40，h5反而好很多），下拉的时候会有掉帧的感觉
			 *    transition设置0.1秒延迟，让css来过渡这段空窗期
			 *  3.回弹效果可修改曲线值来调整效果，推荐一个好用的bezier生成工具 http://cubic-bezier.com/
			 */
			coverTouchstart(e) {
				if (pageAtTop === false) {
					return;
				}
				this.coverTransition = 'transform .1s linear';
				startY = e.touches[0].clientY;
			},
			coverTouchmove(e) {
				moveY = e.touches[0].clientY;
				let moveDistance = moveY - startY;
				if (moveDistance < 0) {
					this.moving = false;
					return;
				}
				this.moving = true;
				if (moveDistance >= 80 && moveDistance < 100) {
					moveDistance = 80;
				}

				if (moveDistance > 0 && moveDistance <= 80) {
					this.coverTransform = `translateY(${moveDistance}px)`;
				}
			},
			coverTouchend() {
				if (this.moving === false) {
					return;
				}
				this.moving = false;
				this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
				this.coverTransform = 'translateY(0px)';
			},
			doReg(){
				this.$refs.goReg.showModal('regModal');	
			},
			goPageWith(page){
				let uId = uni.getStorageSync('userId');
				// let uId =1;
				if(uId>"0"&&uId!=undefined){
					uni.navigateTo({
						url: page
					})
					return;
				}
				
				this.$refs.goReg.showModal('regModal');	
				return;
				
			},
			goPage(page){
				// this.doReg();
				// return;
				uni.navigateTo({
					url: page
				})
			},
			goWeb(item){
				// this.doReg();
				// return;
				// console.log(item)
				if(item.jump>""){
					uni.setStorageSync('jumpUrl',item.jump)
					uni.navigateTo({
						url: '/pages/tabbar/tabbar-2/webView'
					})
				}
				
			},
			async getBanner(){
				let param = {
					recommend:1,
					status:1
				};
				let that = this;
				let data = await this.$http.post(
					'banners', //可以直接放链接(将不启用全局定义域名)
					param, 
				);
				
				console.log(data);
				this.swiperList = data
			},
		}
	}
</script>
<style lang='scss'>
	%flex-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	%section {
		display: flex;
		justify-content: space-around;
		align-content: center;
		background: #fff;
		border-radius: 10upx;
	}
	.cover-container {
		margin-top: 0px;
		padding: 0;
		position: relative;
		/* background: #F2F6F8 !important; */
		padding-bottom: 20upx;

		.arc {
			position: absolute;
			left: 0;
			top: -34upx;
			width: 100%;
			height: 36upx;
		}
		.cu-item{
			background-color: #f1f1f1 !important;
			margin: 0 10px;
		}
	}

	.item-titel {
		font-size: 16px;
		/* border-left:3px solid #4CA5FE; */
		margin-left: -10px;
		margin-bottom: 10px;
		padding-left: 5px;
		image{
			display: inline-block;
			margin-right: 5px;
			width: 1.6em;
			height: 1.6em;
			vertical-align: middle;
		}
	}

	.item {
		display: grid;
		text-align: center;

		image {
			width: 100%;
			height: 30px;
		}

		;
	}

	.basis-xs25 {
		flex-basis: 25%;
		margin-top: 10px;
		margin-bottom: 5px;
	}

	.text-btn{
		font-size: 16px;
		height: 30px;
		line-height: 30px;
	}
	.text-img{
		width: 95px;
		height: 100px;
		position: absolute;
		right: 20px;
		bottom: 5px;
	}
	.new-img{
		width: 95px;
		height: 100px;
		position: absolute;
		right: 20px;
		bottom: 90px;
	}
	.tj-sction {
		@extend %section;

		.tj-item {
			@extend %flex-center;
			flex-direction: column;
			height: 140upx;
			font-size: $font-sm;
			color: #75787d;
		}

		.num {
			font-size: $font-lg;
			color: $font-color-dark;
			margin-bottom: 8upx;
		}
	}

	.padding{
		padding: 10px;
	}
	.pr5{
		padding-right: 5px;
	}
	
	.item {
		display: grid;
		text-align: center;
		height: 160upx;
		align-items: center;
		justify-items: center;
		.image-red{
			width: 60px;
			height: 60px;
			align-items: center;
			display: flex;
			border-radius: 6px;
			background: linear-gradient(180deg, #f6a605 0%, #cc5e10 100%);
		}
		.image-blue{
			width: 60px;
			height: 60px;
			align-items: center;
			display: flex;
			border-radius: 6px;
			background: linear-gradient(180deg, #52B9FE 0%, #624CFE 100%);
		}
		.image-light{
			width: 60px;
			height: 60px;
			align-items: center;
			display: flex;
			border-radius: 10px;
			background: linear-gradient(135deg, #4CFECE 0%, #4CA5FE 100%);
		}
		.image-yellow{
			width: 60px;
			height: 60px;
			align-items: center;
			display: flex;
			border-radius: 6px;
			background: linear-gradient(180deg, #FEF24C 0%, #FE7D4C 100%);
		}
		.image-pg{
			background: linear-gradient(135deg, #a6fefe 0%, #4f95fe 100%);
		}
		.image-js{
			background: linear-gradient(135deg, #4f8dfe 0%, #76e8fe 100%);
		}
		.image-kf{
			background: linear-gradient(180deg, #4CA5FE 0%, #42feb6 100%);
		}
		.image-ba{
			background: linear-gradient(90deg, #42feb6 0%, #4CA5FE 100%);
		}
		.image-fw{
			background: linear-gradient(90deg, #FEF24C 0%, #fea673 100%);
		}
		.image-dg{
			background: linear-gradient(0deg, #4df0fe 0%, #4CA5FE 100%);
		}
		.image-dx{
			background: linear-gradient(0deg, #fcc7ff 0%, #bbf2fe 100%);
		}
		.image-by{
			background: linear-gradient(180deg, #99ffcc 0%, #4CA5FE 100%);
		}
		.image-kd{
			background: linear-gradient(180deg, #fea673 0%, #fe3c3c 100%);
		}
		.image-bj{
			background: linear-gradient(180deg, #4CA5FE 0%, #bbf2fe 100%);
		}
		.image-jz{
			background: linear-gradient(180deg, #fed2c3 0%, #fea189 100%);
		}
		.image-bx{
			background: linear-gradient(180deg, #bbf2fe 0%, #4CA5FE 100%);
		}
		.image-hl{
			background: linear-gradient(180deg, #4CA5FE 0%, #4CFECE 100%);
		}
		.image-fj{
			background: linear-gradient(135deg, #4df0fe 0%, #4CA5FE 100%);
		}
		.image-qt{
			background: linear-gradient(90deg, #a5fefe 0%, #4CA5FE 100%);
		}
		.image-jxg{
			width: 100%;
			height: 40px;
			align-items: center;
			display: flex;
			border-radius: 10px;
			background: linear-gradient(90deg, #51bcfe 0%, #3967fe 100%);
		}
		.image-lsg{
			background: linear-gradient(90deg, #fea673 0%, #fe3c3c 100%);
		}
		.image-sqg{
			background: linear-gradient(90deg, #FEF24C 0%, #fea673 100%);
		}
		.image-jzg{
			background: linear-gradient(45deg, #a5fefe 0%, #4CA5FE 100%);
		}
		.width100{
			width: 100%;
		}
		image {
			width: 100%;
			height: 30px;
		}
		
	}
	.height-40{
		height: 80rpx;
	}
</style>
